<template>
  <el-dialog
    :visible.sync="value"
    :close-on-click-modal="false"
    @closed="handleClosed"
    append-to-body
    :title="title"
    :style="{
      '--theme': theme,
    }"
    width="60%"
    class="cus-dialog-container"
  >
    <!-- {{ data }} -->
    <!-- <img :src="fileUrl" alt="" /> -->

    <template v-if="show">
      <template v-if="fileType === 'pdf'">
        <iframe :src="fileUrl" frameborder="0" style="height: 615px"></iframe>
      </template>
      <el-image
        v-if="fileType !== 'pdf'"
        style="height: 550px"
        :src="fileUrl"
        :preview-src-list="[fileUrl]"
        fit="fit"
      ></el-image>
    </template>
    <template v-if="false">
      <template v-if="fileType === 'pdf'">
        <!-- 全部显示 -->
        <!-- <div style="height: 500px;overflow: scroll">
          <pdf ref="pdf" :src="fileUrl" v-for="i in numPages" :key="i" :page="i"> </pdf>
        </div> -->
        <!-- 分页显示 -->
        <pdf
          style="height: 550px; overflow: scroll"
          :page="pageNum"
          :src="fileUrl"
          @progress="loadedRatio = $event"
          @num-pages="pageTotalNum = $event"
        ></pdf>
        <div style="text-align: center; margin-top: 1rem">
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            size="mini"
            @click="prePage"
          >
            上一页
          </el-button>
          <el-button type="primary" size="mini" @click="nextPage">
            下一页
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
          <div style="margintop: 10px; color: #409eff">
            {{ pageNum }} / {{ pageTotalNum }}
          </div>
        </div>
      </template>
      <el-image
        v-if="fileType !== 'pdf'"
        style="height: 550px"
        :src="fileUrl"
        :preview-src-list="[fileUrl]"
        fit="fit"
      ></el-image>
    </template>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import pdf from 'vue-pdf'
export default {
  name: 'data-import',
  components: { pdf },
  props: {
    title: {
      type: String,
      default: '专题报告',
    },
    value: {
      type: Boolean,
      default: false,
    },
    fileUrl: {
      type: String,
      required: true,
    },
    fileType: {
      type: String,
    },
  },
  data() {
    return {
      numPages: null,
      show: true,
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },
  computed: {
    ...mapGetters(['theme', 'ligthTheme']),
  },
  methods: {
    handleClosed() {
      // 关闭弹窗，重置数据
      this.$emit('closed')
      // this.show = false;
      // this.pageNum = 1;
      // this.pageTotalNum = 1;
      // this.loadedRatio = 0;
    },
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
  },
}
</script>

<style lang="scss" scoped>
img {
  width: 300px;
  height: 300px;
}
.cus-dialog-container {
  .el-dialog {
    border-radius: 5px;
    margin-top: 5vh !important;
    overflow: hidden;
    .el-dialog__header {
      .el-dialog__title {
        line-height: unset;
        font-size: 16px;
        color: white;
      }
      background: var(--theme);
      padding: 10px;
      .el-dialog__headerbtn {
        top: 12px;
        right: 10px;
        .el-dialog__close {
          color: white !important;
        }
      }
    }
    .el-dialog__body {
      padding: 0px;
      text-align: center;
      iframe {
        width: 100%;
        height: 800px;
      }
    }
  }
}
::v-deep .el-dialog__body {
  text-align: center;
  padding: 20px;
}
::v-deep .el-dialog {
  margin-top: 7vh !important;
}
::v-deep .el-dialog__header {
  padding: 10px;
}
</style>
